<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="/xlive/script/xlv.js"></script>
</head>
<body>
   <div id="menu_main" style="font-family:'Arial';width:760px;min-height:600px;background:url(/xlive/images/rst/water.jpg) repeat top left; margin:auto; float:left"
    	 xlvobject="xlv.obj.pane" 
    	 xlvmethod="{
    	 	showCart:function(on){
    	 		this.$V.right_pane.showPane(on? 1:0);
    	 		this.$V.left_pane.showPane(on? 1:0);
    	 	}
    	 }"
    >
         
         <div xlvobject="xlv.obj.webObject" xlvprop="{name:'fs.google.rst',objectURL:'fs.google.rst'}"></div>
         
         <style>
           	#menu_main * #bom_directory {float:left;position:relative;}
           	#menu_main * #bom_directory #directory {position:relative;margin:0px 14px;}
          	#menu_main * #bom_directory #slidebox_box #data_pane {
          		position:relative;
           		width:190px; height:50px; line-height:50px;
           		font-size:15px;font-weight:normal;padding:0; padding-left:20px;cursor:default;overflow:hidden;
           		background:url(/xlive/web/img?method=png&c=466281&o=0.3) top left repeat;
          		border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
          		border:1px solid #466281;
          		color:white;
           		margin:8px 2px;
           		cursor:pointer;
          	}
          	#menu_main * #bom_directory #slidebox_box #data_pane:hover {
          		border:1px solid white;
          	}
          	#menu_main * #bom_directory #directory.selected {background:none;}
          	#menu_main * #bom_directory #directory.selected #data_pane {
          		color:white;
          		border:1px solid white;
          		font-weight:bold;
          		background:url(/xlive/web/img?method=png&c=000080&o=0.1) top left repeat;
          	}
          	#menu_main * #bom_directory #directory #data_pane #dir{
          		display:none;position:absolute;right:8px;top:0px;height:50px;width:40px; 
				background:url(/xlive/images/rst/icon_arrow.png) no-repeat center;
			}
			#menu_main * #bom_directory #directory.dir #data_pane #dir{display:block;}
			#menu_main * #bom_directory #directory.dir #data_pane:hover #dir{background:url(/xlive/images/rst/icon_arrow2.png) no-repeat center;}
			#menu_main * #bom_directory #directory #data_pane #icon {
				margin:auto 0px auto 0px;vertical-align:middle;display:inline-block;width:32px;height:32px;
			}
			#menu_main * #bom_directory #directory #data_pane #name {
				width:160px;margin:auto 0px auto 0px;vertical-align:middle;display:inline-block;
				overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;
			}
			#menu_main * #bom_directory #directory.selected #data_pane #count {
				color:pink;
			}
            #menu_main * #directory #edit_pane {position:absolute;right:0px;top:-6px;display:none;}
            #menu_main * #directory #edit_pane #remove {float:right;margin:2px}
            #menu_main * #directory #edit_pane #update {float:right;margin:2px}
            #menu_main * #directory #edit_pane #copy {float:right;margin:2px}
            #menu_main * #directory #add_pane {
            	width:206px;height:50px;
            	margin:4px;text-align:center;vertical-align:middle;
            	display:none;
            	border:dotted 1px white; color:white;line-height:40px;
            	border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
          		cursor:pointer;
            }
         	#menu_main * #directory #add_pane #paste {float:left;margin-left:-6px;margin-top:-8px}
         	/******/
         	
         	#btn_showList	{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) left top; display:inline-block; float:left}
			#btn_showBlock				{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) 38px 58px; display:inline-block;}
			#btn_showList:hover			{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) left 29px; display:inline-block; float:left}
			#btn_showBlock:hover		{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) 38px 29px; display:inline-block;}
			#btn_showList.btn_active	{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) left 58px; display:inline-block; float:left}
			#btn_showBlock.btn_active	{width:36px; height:29px; background:url(/xlive/images/rst/btn_switch.png) 38px top; display:inline-block;}
         	
           	#menu_main * #bom_product{float:left;position:relative;}
           	#menu_main * #bom_product #product {position:relative;margin-left:2px;}
           	#menu_main * #bom_product #slidebox_box #product{position:relative;float:left;}
          	#menu_main * #bom_product #slidebox_box #data_pane {
          		margin:8px 8px 28px 8px; color:white;
          	}
          	#menu_main * #bom_product #slidebox_box #data_pane #icon_frame {
          		background:url(/xlive/web/img?method=png&c=466281&o=0.3) top left repeat;
          		border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
          		border:1px solid #466281;
          		padding:4px;
          	}
          	#menu_main * #bom_product #slidebox_box #data_pane #icon_frame #icon {
          		border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;
          		width:140px;height:80px;
          	}
          	#menu_main * #bom_product #slidebox_box #data_pane #desc_frame{
          		position:relative;
          		margin:4px 0 5px 8px;
          	}
          	#menu_main * #bom_product #slidebox_box #data_pane #desc {display:none;}
          	#menu_main * #bom_product #slidebox_box #data_pane #name {
          		text-align:left;font-size:14px; font-weight:bold;width:124px;display:block; 
          		overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis;
          	}
          	#menu_main * #bom_product #slidebox_box #data_pane #sale {font-size:12px;}
          	#menu_main * #bom_product #slidebox_box #data_pane #list_price {font-size:12px;text-decoration:line-through;}
          	#menu_main * #bom_product #slidebox_box #data_pane #sale_sign {margin:0 2px 0 4px}
          	#menu_main * #bom_product #slidebox_box #data_pane #price {font-size:15px; line-height:20px;}
          	#menu_main * #bom_product #slidebox_box #data_pane #add_prod {position:absolute;right:8px;top:14px;cursor:pointer;}
            #menu_main * #product #edit_pane {position:absolute;right:0px;top:-2px;display:none;}
            #menu_main * #product #edit_pane #remove {float:right;margin:2px}
            #menu_main * #product #edit_pane #update {float:right;margin:2px}
            #menu_main * #product #edit_pane #copy {float:right;margin:2px}
            #menu_main * #product #add_pane{
            	border:dotted 1px white; color:white;margin:14px;text-align:center;vertical-align:middle;line-height:60px;
            	border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
          		width:140px;height:80px;cursor:pointer;
            }
         	#menu_main * #product #add_pane #paste {float:left;margin-left:-6px;margin-top:-8px}
         </style>


         <div xlvobject="xlv.obj.dmTrigger"
         	 xlvprop="{
         	 	dmName:'menu',
         	 	listener:{when:'afterModelChanged',notify:'setChanged',memoType:'create',memoMethods:'list'}
         	 }"
         	 xlvmethod="{
         	 	initial:function(){
         	 		this.$V.bomDirectory=this.getParentById('menu_main').$V.bom_directory;
         	 		this.$V.bomProduct=this.getParentById('menu_main').$V.bom_product;
         	 	},
         	 	process:function(){
         	 	},
         	 	mvc_afterModelChanged:function(dm,notify,memo){
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='list') {
         	 			return this.$V.bomDirectory.build(dm.getNode('bom'));
         	 		}
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='remove-bom'){
            			if(dm.getValue('remove-bom.type') != 1){
            				this.$V.bomDirectory.refreshCurrentBox();
            				this.$V.bomDirectory.refreshStyle();
            				if(this.$V.bomProduct.$V.currentBox){
            					var prod=this.$V.bomProduct.$V.currentBox.pNode;
            					var n=(prod)?xlv.util.selectXmlSingleNode('ancestor::bom',prod):null;
            					if(n!=this.$V.bomDirectory.$V.currentBox.pNode){
            						this.$V.bomProduct.setEditMode(false);
            						this.$V.bomProduct.emptyProduct();
            					}
            				}
            			}
            		}
            		if(notify=='setChanged' &amp;&amp; memo.methods=='remove-bom'){
            			var pkey=dm.getValue('remove-bom.parent-key');
            			var type=dm.getValue('remove-bom.type');
            			if(this.$V.bomProduct.$V.currentBox){
            				if(pkey==xlv.util.getXmlNodeValue('key',this.$V.bomProduct.$V.currentBox.pNode) &amp;&amp; type=='1'){
            					this.$V.bomDirectory.refreshCurrentBox();
            					this.$V.bomDirectory.refreshStyle();
            					return this.$V.bomProduct.refreshCurrentBox();
            				}
            			}
            		}
            		if(notify=='setChanged' &amp;&amp; memo.methods=='set-directory'){
            			if('true'!=dm.getValue('set-directory.return.valid')){
							return alert('set Directory error :'+dm.getValue('set-directory.return.why'));
						}
            			if(dm.getValue('set-directory.type') != 1)this.$V.bomDirectory.refreshCurrentBox();
           				this.$V.bomDirectory.refreshStyle();
            		}
            		if(notify=='setChanged' &amp;&amp; memo.methods=='list-bom'){
            			var key=dm.getValue('list-bom.key');
            			return this.$V.bomProduct.setBomNode(dm.getNode('descendant::bom[key=\''+key+'\']'));
            		}
            		if(notify=='setChanged' &amp;&amp; memo.methods=='set-product'){
            			if('true'!=dm.getValue('set-product.return.valid')){
							return alert('set Product error :'+dm.getValue('set-product.return.why'));
						}
            			var pkey=dm.getValue('set-product.parent-key');
            			var type=dm.getValue('set-product.type');
            			if(this.$V.bomProduct.$V.currentBox){
            				if(pkey==xlv.util.getXmlNodeValue('key',this.$V.bomProduct.$V.currentBox.pNode) &amp;&amp; type=='1'){
            					this.$V.bomDirectory.refreshCurrentBox();
            					this.$V.bomDirectory.refreshStyle();
            					return this.$V.bomProduct.refreshCurrentBox();
            				}
            			}
            		}
         	 	}
         	 }"
         >
         </div>
         <div xlvobject="xlv.obj.dmTrigger"
         	 xlvprop="{
         	 	dmName:'menu_order',listener:{when:'afterModelChanged',notify:'setChanged',memoType:'create',memoMethods:'set-order'}
         	 }"
         	 xlvmethod="{
         	 	process:function(){
         	 		var dm=this.getDataModel();
         	 		if(dm.getValue('set-order/return/valid')!='true'){
         	 			return alert('訂單錯誤 :'+dm.getValue('set-order/return/why'));
         	 		}
         	 		var order=dm.getNode('set-order/return/order');
         	 		var id=dm.getNode('set-order/return/order/id');
         	 		var key=dm.getNode('set-order/return/order/key');
         	 		var cart_pane=this.getParentById('menu_main').$V.cart_pane;
         	 		cart_pane.orderResponse();
         	 		cart_pane.removeAllProd();
         	 		//
         	 		var cust=this.getDataModel('customer');
         	 		if(cust.getValue('get-customer.return.customer.key')){
         	 			cust.copyGetToSet();
         	 			cust.setValue(new Date().formatDate(),'set-customer.customer.last-date');
         	 			cust.webMethod('set-customer');
         	 		}
         	 		var cnl=this.getDataModel('gae-channel');
         	 		cnl.sendMessage('','',null,key);
         	 		//
         	 		var publish = {
         	 			method: 'feed',
         	 			message: 'xlive-rst 即時購, 購物點數  : ',
         	 			name: 'xlive-rst 即時購',
         	 			caption: 'caption of xlive-rst',
         	 			description:'xlive-rst GAE -- facebook shoping center, allows you to harness the power of Facebook, bringing the user\'s identity, social graph and distribution power to your site.',
         	 			link: 'http://apps.facebook.com/xlive-rst/',
         	 			picture: 'http://fbrell.com/f8.jpg',
         	 			actions: [{name: 'xlive-rst', link: 'http://apps.facebook.com/xlive-rst/' }],
         	 			user_message_prompt: 'Share your thoughts about xlive-rst'};
         	 		FB.ui(publish);
         	 	}
         	 }"
         >
         </div>


 	<div id="left_pane" style="width:240px;overflow:hidden;float:left"
 		 xlvobject="xlv.obj.generic"
 		 xlvmethod="{
 		 	initial:function(){
 		 		this.$self('initial');
 		 		this.getParentById('menu_main').$V.left_pane=this;
 		 		this.$V.canvas=xlv.util.findChild(this,{id:'left_canvas'},false,false);
 		 	},
 		 	showPane:function(index){
 		 		if(index==1){
 		 			if(!FB || !FB.getSession()) this.getParentById('menu_main').$V.order_history.nullCustomer();
 		 		}
				var option={element:this,properties:{},duration:300};
				option.properties.scrollLeft=index*240;
				xlv.util.styleEffect(option);
 		 	}
 		 }"
 	>
 	 <div id="left_canvas" style="width:500px">
         <div id="bom_directory" xlvobject="xlv.obj.slideBox" style="float:left;width:240px"  
         	 xlvmethod="{
         	 	construct:function(){
					this._pattern=xlv.util.findChild(this,{id:'directory'},false,false);
					if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
					this.$self('construct');
					var v=this.$V;
					v.edit=xlv.util.findChild(this,{id:'xlvid_edit'},false,false);
					v.edit_title=xlv.util.findChild(this,{id:'xlvid_edit_title'},false,false);
					v.back=xlv.util.findChild(this,{id:'xlvid_back'},false,false);
					v.back_title=xlv.util.findChild(this,{id:'xlvid_back_title'},false,false);
					v.back.style.display='none';
					this.getParentById('menu_main').$V.bom_directory=this;
				},
				initial:function(){
					this.$self('initial');
					this.$V.editMode = false;
					xlv.util.setElementValue(this.$V.edit_title,'編輯');
					this.$V.bomProduct=this.getObjectById('bom_product');
				},
				build:function(node){
					this.$P.pNode=node;
					this._createBox(node);
				},
				boxForToolBar:function(box){
					if(box.pNode){
						xlv.util.setElementValue(this.$V.edit_title,(this.$V.editMode)?'完成':'編輯');
						var prev=xlv.util.findPrevSibling(box,{id:'slidebox_box'});
						this.$V.back.style.display=(prev)?'block':'none';
						if(prev){
							var name=xlv.util.getXmlNodeValue('name',prev.pNode);
							name=(name=='menu head')?'主選單':name;
							xlv.util.setElementValue(this.$V.back_title,name);
						}
					}
				},
				_click:function(event){
					if(event.target.id=='xlvid_edit'||event.target.id=='xlvid_edit_title'){
						event.stop();
						if(!this.$V.currentBox) return;
						xlv.util.setElementValue(this.$V.edit_title,(this.$V.editMode)?'編輯':'完成');
						return this.setEditMode(!this.$V.editMode);
					}
					if(event.target.id=='copy'){
						event.stop();
						return alert('under construction');
					}
					if(event.target.id=='paste'){
						event.stop();
						return alert('under construction');
					}
					if(event.target.id=='cart'){
						event.stop();
						return alert('under construction');
					}
					if(event.target.id=='remove'){
						event.stop();
						var dir=this.targetElement(event.target,{id:'directory'});
						var box=this.targetElement(dir,{id:'slidebox_box'});
						var dm=this.getDataModel('menu');
						var pkey=xlv.util.getXmlNodeValue('key',box.pNode);
						var key = xlv.util.getXmlNodeValue('key',dir.pNode);
						var name = xlv.util.getXmlNodeValue('name',dir.pNode);
						var type = xlv.util.getXmlNodeValue('type',dir.pNode);
						if(confirm('移除目錄 : '+name+'  及其下所有子目錄,商品')){
							dm.setValue(pkey,'remove-bom.parent-key');
							dm.setValue(key,'remove-bom.key');
							dm.setValue(type,'remove-bom.type');
							dm.webMethod('remove-bom');
						}
						return;
					}
					if(event.target.id=='update'){
						event.stop();
						var dir=this.targetElement(event.target,{id:'directory'});
						var box=this.targetElement(dir,{id:'slidebox_box'});
						this.getDataModel('menu').prepareSetDirectory(box.pNode,dir.pNode,0);
						return this.getParentById('menu_main').$V.set_directory.open(dir,dir.pNode);
					}								
					var dir=this.targetElement(event.target,{id:'directory'});
					if(dir &amp;&amp; this.targetElement(event.target,{id:'add_pane'})){
						event.stop();
            			var box=this.targetElement(dir,{id:'slidebox_box'});
        				this.getDataModel('menu').prepareSetDirectory(box.pNode,null,0);
        				return this.getParentById('menu_main').$V.set_directory.open(dir,dir.pNode);
					}
					if(dir){
						event.stop();
            			var bom=dir.pNode;
            			var name = xlv.util.getXmlNodeValue('name',bom);
            			var parts= xlv.util.getXmlNodeValue('parts/@parts',bom);
            			if(parts=='dir') return this.setBomNode(bom);
            			if(this.getDataModel('menu').selectBom(bom))this.listProduct(bom);
  						if(this.$V.editMode &amp;&amp; Element.hasClassName(dir,'selected')){
   							var parts=xlv.util.getXmlNodeValue('parts/@parts',bom);
   							if('empty'==parts||'dir'==parts||parts==null){
   								this.setBomNode(bom);
  								this.listProduct(null);
   								return this.selectedBom(null);
   							}
   						}
   						return this.selectedBom(bom);
					}
					if(event.target.id=='xlvid_back'||event.target.id=='xlvid_back_title'){
						event.stop();
						return this.back();
					}
					this.$self('_click',event);
				},
				listProduct:function(bom){
					if(bom)	this.$V.bomProduct.setBomNode(bom);
					else {
						this.$V.bomProduct.setEditMode(false);
						this.$V.bomProduct.emptyProduct();
					}
				},
				setBomNode:function(bom){
					if(this.$V.currentBox &amp;&amp; this.$V.currentBox.pNode == bom) return;
					this._createBox(bom);
				},
				refreshCurrentBox:function(){
					if(this.$V.currentBox) {
						var prev=xlv.util.previousSiblings(this.$V.currentBox,{id:'slidebox_box'});
						for(var i=0;i &lt; prev.length;++i) this.nodeForBox(prev[i].pNode,prev[i]);
						this.nodeForBox(this.$V.currentBox.pNode,this.$V.currentBox);
					}
				},
				nodeForBox:function(node,box){
					box.pNode=node;
					while(box.firstChild)xlv.sys.dispose(box.firstChild,true);
					if(node){
						var boms=xlv.util.selectXmlNodes('parts/bom',node);
						for(var i=0;i &lt; boms.length;++i)	this.partNode(box,boms[i]);
					}
					this.setEditMode(this.$V.editMode);
				},
				partNode:function(box,node){
					var dir=xlv.sys.clonePatternNode(this._pattern);
					box.appendChild(dir);
					dir.pNode=node;
					xlv.sys.initialize(dir);
					var icon=xlv.util.findChild(dir,{id:'icon'},false,false);
					var name=xlv.util.findChild(dir,{id:'name'},false,false);
					var src=xlv.util.getXmlNodeValue('icon',node);
					if(src) {
						icon.imgSrc(src);
						name.style.width='120px';
					}
					icon.style.display=(src)?'inline-block':'none';
					xlv.util.setElementValue(name,xlv.util.getXmlNodeValue('name',node));
					xlv.util.findChild(dir,{id:'desc'},false,false).innerHTML=xlv.util.getXmlNodeValue('desc-html',node);
					var parts= xlv.util.getXmlNodeValue('parts/@parts',node);
					var count=xlv.util.findChild(dir,{id:'count'},false,false);
					if(parts=='dir') Element.addClassName(dir,'dir');
					xlv.util.setElementValue(count,xlv.util.getXmlNodeValue((parts=='dir')?'parts/@countDir':'parts/@countBom',node));
				},
            	selectedBom:function(bom){
            		var boxs=xlv.util.children(this,{id:'slidebox_box'},false,false);
            		for(var i=0;i &lt; boxs.length;++i) {
            			var dirs = xlv.util.children(boxs[i],{id:'directory'},false,false);
            			for(var m=0;m &lt; dirs.length;++m){
            			    if(bom &amp;&amp; dirs[m].pNode==bom) Element.addClassName(dirs[m],'selected');
							else Element.removeClassName(dirs[m],'selected');
            			}
            		}
            	},
            	refreshStyle:function(){
            		var boxs=xlv.util.children(this,{id:'slidebox_box'},false,false);
            		for(var i=0;i &lt; boxs.length;++i) {
            			var dirs = xlv.util.children(boxs[i],{id:'directory'},false,false);
            			for(var m=0;m &lt; dirs.length;++m){
            				var parts=xlv.util.getXmlNodeValue('parts/@parts',dirs[m].pNode);
            				Element.removeClassName(dirs[m],'dir');
            				if('dir'==parts) Element.addClassName(dirs[m],'dir');
            			}
            		}
            	},
            	setEditMode:function(on){
            		this.$V.editMode=on;
            		var boxs=xlv.util.children(this,{id:'slidebox_box'},false,false);
            		for(var i=0;i &lt; boxs.length;++i) {
            			var dirs = xlv.util.children(boxs[i],{id:'directory'},false,false);
            			for(var m=0;m &lt; dirs.length;++m)this.editModeDirectory(dirs[m],on);
            			var last=dirs[dirs.length-1];
            			if(on) {
            				if(!last || last.pNode){
            					var dir=xlv.sys.clonePatternNode(this._pattern);
            					boxs[i].appendChild(dir);
            					xlv.sys.initialize(dir);
            					this.editModeDirectory(dir,on);
            				}
            			}else{
            				if(last &amp;&amp; !last.pNode) xlv.sys.dispose(last,true);
            			}
            		}
            	},
            	editModeDirectory:function(dir,on){
            		var data=xlv.util.findChild(dir,{id:'data_pane'},false,false);
            		var edit=xlv.util.findChild(dir,{id:'edit_pane'},false,false);
            		var add=xlv.util.findChild(dir,{id:'add_pane'},false,false);
            		data.style.display=(on &amp;&amp; !dir.pNode)?'none':'block';
            		edit.style.display=(on &amp;&amp; dir.pNode)?'block':'none';
            		add.style.display=(on &amp;&amp; !dir.pNode)?'block':'none';
            	}
         	 }"
         >
         
         
        	<div id="slidebox_toolbar" style="background:url(/xlive/images/rst/headerBg_240.png) no-repeat left top; height:48px; line-height:30px; padding:6px;">
           		<div id="xlvid_back" style="float:left;background:url(/xlive/images/rst/btnd_left_arrow.png) no-repeat left top; color:#FFF; text-decoration:none; padding:0px 6px 0px 6px;display:inline-block">
           			<span id="xlvid_backtitle" style="cursor:pointer;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top; padding:0px 6px 10px 6px; margin-right:-10px;float:left; display:inline-block;line-height:24px; line-height:30px\9; font-size:13px;">
           			</span>
           		</div>
            	
                <div id="xlvid_edit" style="float:right; margin-right:5px;">
                	<div style="background:url(/xlive/images/rst/btnb_left.png) no-repeat left top; color:#FFF; text-decoration:none; padding:0px 6px 10px 2px; float:left;">
                		<span id="xlvid_edit_title" style="cursor:pointer;background:url(/xlive/images/rst/btnb_right.png) no-repeat right top; padding:0px 6px 10px 6px; margin-right:-10px; float:left;line-height:24px; line-height:30px\9; font-size:13px;">編輯
                		</span>
                	</div>
                </div>
            </div>
         
         	<div id="directory">
         		<div id="data_pane">
         			<div id="icon" xlvobject="xlv.obj.ximg"></div>
         			<span id="name"><span id="count" style="font-size:11px;line-height:8px;margin-left:4px;padding:0 4px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background:url(/xlive/web/img?method=png&c=ffffff&o=0.3) top left repeat"></span></span><span id="desc"></span>
         			<div id="dir"></div>
         		</div>
         		<div id="edit_pane">
         			<img id="remove" src="/xlive/images/rst/btn_tool_del.png" title="移除目錄"/>
         			<img id="update" src="/xlive/images/rst/btn_tool_reload.png" title="編輯目錄"/> 
         			<img id="copy" src="/xlive/images/rst/btn_tool_copy.png" title="複製目錄"/> 
         		</div>
         		<div id="add_pane">新增目錄
         			<img id="paste" src="/xlive/images/rst/btn_tool_paste.png" title="貼上目錄"/> 
         		</div>
         	</div>
         </div>
     
 		 <div id="order_history" style="float:left;width:240px;position:relative" 
 		 	  xlvobject="xlv.obj.viewer" xlvprop="{dmName:'customer'}"
 		 	  xlvmethod="{
 		 	  	initial:function(){
 		 	  		this.$self('initial');
 		 	  		this.getParentById('menu_main').$V.order_history=this;
 		 	  	},
 		 	  	mvc_afterModelChanged:function(dm,notify,memo){
 		 	  		if(notify=='setChanged' &amp;&amp; 'true'==dm.getValue('get-customer.return.valid')){
 		 	  			var pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
 		 	  			var node=dm.getNode('get-customer.return.customer');
 		 	  			node.setAttribute('pxml','pxml');
 		 	  			var name=node.getElementsByTagName('name')[0];
 		 	  			name.setAttribute('pxml','text');
 		 	  			pxml.build(node);
 		 	  			this.getParentById('menu_main').$V.cart_pane.customerBeenReset();
 		 	  		}
 		 	  	},
 		 	  	nullCustomer:function(){
 		 	  		var pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
 		 	  		var dm=this.getDataModel();
 		 	  		var node=dm.getNode('null-customer');
 		 	  		pxml.build(node);
 		 	  	}
 		 	  }"
 		 >
 		 
 		    <div id="slidebox_toolbar" style="position:relative;width:240px;float:left;background:url(/xlive/images/rst/headerBg_240.png) no-repeat left top; height:48px; line-height:30px; padding:6px;">
 		 		<span style="color:white">交易記錄</span>
 		 	</div>
 		 	<div style="float:left;width:240px;position:relative;padding:8px 0 8px 0;">
 				<div id="pxml" xlvobject="xlv.obj.pxml"  style="position:relative;width:200px;margin-left:10px" class="pxml_border_radius"
	    			xlvprop="{
	    				showCancel:false,
	    				showComplete:false
	    			}"
	    			xlvmethod="{
	    				build:function(node){
	    					this.$self('build',node);
	    				},
	    				facebook_login:function(){
	    					var dm=this.getDataModel('customer');
	    					FB.login(function(resp){dm.getCustomer();}.bind(this),{});
	    				}
	    			}"
	    		>
	    		</div>
 		 	
 		 	</div>
 		 
 		 </div>
     </div>         
	</div>
	
 	<div id="right_pane" style="width:520px;overflow:hidden;float:left;"
 		 xlvobject="xlv.obj.generic"
 		 xlvmethod="{
 		 	initial:function(){
 		 		this.$self('initial');
 		 		this.getParentById('menu_main').$V.right_pane=this;
 		 		this.$V.canvas=xlv.util.findChild(this,{id:'right_canvas'},false,false);
 		 	},
 		 	showPane:function(index){
				var option={element:this,properties:{},duration:300};
				option.properties.scrollLeft=index*520;
				xlv.util.styleEffect(option);
 		 	}
 		 }"
 	>
  	 <div id="right_canvas" style="width:1200px">
  
         <div id="bom_product" xlvobject="xlv.obj.slideBox" style="float:left;width:520px"
         	 xlvmethod="{
         	 	construct:function(){
					this._pattern=xlv.util.findChild(this,{id:'product'},false,false);
					if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
					this.$self('construct');
					var v=this.$V;
					v.edit=xlv.util.findChild(v.toolBar,{id:'xlvid_edit'},false,false);
					v.edit_title=xlv.util.findChild(v.toolBar,{id:'xlvid_edit_title'},false,false);
					v.cartpin=xlv.util.findChild(v.toolBar,{id:'cartpin'},false,false);
					v.cartpin_value=xlv.util.findChild(v.toolBar,{id:'cartpin_value'},false,false);
					this.getParentById('menu_main').$V.bom_product=this;
				},
				initial:function(){
					this.$self('initial');
					this.$V.editMode = false;
					xlv.util.setElementValue(this.$V.edit_title,'編輯');
					this.$V.cartpin.style.visibility='hidden';
				},
				build:function(node){
					this.$P.pNode=node;
					this._createBox(node);
				},
				_slideToBox:function(box){
					if(!box.pNode)return;
					this.boxForToolBar(box);
					var option={element:this.$V.viewport,properties:{},duration:500};
					option.properties.scrollLeft=box.offsetLeft;
					option.finished=function(){
						var olds=xlv.util.children(option.element,{id:'slidebox_box'})||null;
						if(olds &amp;&amp; olds.length &gt; 1) xlv.sys.dispose(olds[0],true);
						option.element.scrollLeft=0;
					}
					xlv.util.styleEffect(option);
				},
				boxForToolBar:function(box){
					if(box.pNode){
						var name=xlv.util.getXmlNodeValue('name',box.pNode);
						xlv.util.setElementValue(this.$V.name,(name||''));
						xlv.util.setElementValue(this.$V.edit_title,(this.$V.editMode)?'完成':'編輯');
					}
				},
				_click:function(event){
					var tid=event.target.id;
					if(tid=='xlvid_edit'||tid=='xlvid_edit_title'){
						event.stop();
						if(!this.$V.currentBox) return;
						xlv.util.setElementValue(this.$V.edit_title,(this.$V.editMode)?'編輯':'完成');
						return this.setEditMode(!this.$V.editMode);
					}
					if(tid=='copy'){
						event.stop();
						return alert('under construction');
					}
					if(tid=='paste'){
						event.stop();
						return alert('under construction');
					}
					if(tid=='cart'){
						event.stop();
						var main=this.getParentById('menu_main');
						main.$V.cart_pane.rebuild();
						main.showCart(true);;
						return;
					}
					if(tid=='add_prod'){
						event.stop();
						var prod=this.targetElement(event.target,{id:'product'});
						var prop={prodKey:xlv.util.getXmlNodeValue('key',prod.pNode),prodNode:prod.pNode,productDiv:this};
						this.getParentById('menu_main').$V.add_to_cart.open(prod.pNode);
					}
					if(tid=='remove'){
						event.stop();
						var prod=this.targetElement(event.target,{id:'product'});
						var box=this.targetElement(prod,{id:'slidebox_box'});
						var dm=this.getDataModel('menu');
						var pkey=xlv.util.getXmlNodeValue('key',box.pNode);
						var key = xlv.util.getXmlNodeValue('key',prod.pNode);
						var name = xlv.util.getXmlNodeValue('name',prod.pNode);
						var type = xlv.util.getXmlNodeValue('type',prod.pNode);
						if(confirm('移除商品 : '+name)){
							dm.setValue(pkey,'remove-bom.parent-key');
							dm.setValue(key,'remove-bom.key');
							dm.setValue(type,'remove-bom.type');
							dm.webMethod('remove-bom');
						}
						return;
					}
					if(tid=='update'){
						event.stop();
						var prod=this.targetElement(event.target,{id:'product'});
						var box=this.targetElement(prod,{id:'slidebox_box'});
						this.getDataModel('menu').prepareSetProduct(box.pNode,prod.pNode,1);
						return this.getParentById('menu_main').$V.set_product.open(prod,prod.pNode);
					}
					var prod=this.targetElement(event.target,{id:'product'});
					if(prod &amp;&amp; this.targetElement(event.target,{id:'add_pane'})){
						event.stop();
            			var box=this.targetElement(prod,{id:'slidebox_box'});
        				this.getDataModel('menu').prepareSetProduct(box.pNode,null,1);
        				return this.getParentById('menu_main').$V.set_product.open(prod,prod.pNode);
					}
					this.$self('_click',event);
				},
				cartCountProducts:function(){
					var dm=this.getDataModel('menu_order');
					var count = (dm)?dm.countProducts():0;
					this.$V.cartpin.style.visibility=(count)?'visible':'hidden';
					xlv.util.setElementValue(this.$V.cartpin_value,count);
				},
				emptyProduct:function(){
					if(this.$V.currentBox) {
						this.nodeForBox(null,this.$V.currentBox);
						xlv.sys.dispose(this.$V.currentBox,true);
						this.$V.currentBox=null;
					}
				},
				setBomNode:function(bom){
					if(!bom &amp;&amp; this.$V.currentBox) return this.nodeForBox(null,this.$V.currentBox);
					if(this.$V.currentBox &amp;&amp; this.$V.currentBox.pNode == bom) return;
					if(!this.$V.currentBox){
						var box=this._createBox(null);
						box.style.height='1px';
						box.style.visibility='hidden';
					}
					this._createBox(bom);
				},
				refreshCurrentBox:function(){
					if(this.$V.currentBox) this.nodeForBox(this.$V.currentBox.pNode,this.$V.currentBox);
				},
				nodeForBox:function(node,box){
					box.pNode=node;
					while(box.firstChild)xlv.sys.dispose(box.firstChild,true);
					if(node){
						var boms=xlv.util.selectXmlNodes('parts/bom',node);
						for(var i=0;i &lt; boms.length;++i)	this.partNode(box,boms[i]);
					}
					this.setEditMode(this.$V.editMode);
				},
				partNode:function(box,node){
					var prod=xlv.sys.clonePatternNode(this._pattern);
					box.appendChild(prod);
					prod.pNode=node;
					xlv.sys.initialize(prod);
					var icon=xlv.util.findChild(prod,{id:'icon'},false,false);
					var name=xlv.util.findChild(prod,{id:'name'},false,false);
					var lprice=xlv.util.findChild(prod,{id:'list_price'},false,false);
					var sign=xlv.util.findChild(prod,{id:'sale_sign'},false,false);
					var price=xlv.util.findChild(prod,{id:'price'},false,false);
					var desc=xlv.util.findChild(prod,{id:'desc'},false,false);
					var src=xlv.util.getXmlNodeValue('icon',node);
					if(src) icon.imgSrc(src);
					xlv.util.setElementValue(name,(xlv.util.getXmlNodeValue('name',node)||'&nbsp;'));
					desc.innerHTML=xlv.util.getXmlNodeValue('desc-html',node);
					var lp=xlv.util.getXmlNodeValue('list-price',node);
					if(lp &amp;&amp; lp != 0)	xlv.util.setElementValue(lprice,lp);
					else{
						lprice.style.display='none';
						sign.style.display='none';
					}
					xlv.util.setElementValue(price,xlv.util.getXmlNodeValue('price',node));
				},
            	setEditMode:function(on){
            		this.$V.editMode=on;
            		var boxs=xlv.util.children(this.$V.canvas,{id:'slidebox_box'},false,false);
            		for(var i=0;i &lt; boxs.length;++i) {
            			var prods = xlv.util.children(boxs[i],{id:'product'},false,false);
            			for(var m=0;m &lt; prods.length;++m)this.editModeProduct(prods[m],on);
            			var last=prods[prods.length-1];
            			if(on) {
            				if(!last || last.pNode){
            					var prod=xlv.sys.clonePatternNode(this._pattern);
            					boxs[i].appendChild(prod);
            					xlv.sys.initialize(prod);
            					this.editModeProduct(prod,on);
            				}
            			}else{
            				if(last &amp;&amp; !last.pNode) xlv.sys.dispose(last,true);
            			}
            		}
            	},
            	editModeProduct:function(prod,on){
            		var data=xlv.util.findChild(prod,{id:'data_pane'},false,false);
            		var edit=xlv.util.findChild(prod,{id:'edit_pane'},false,false);
            		var add=xlv.util.findChild(prod,{id:'add_pane'},false,false);
            		data.style.display=(on &amp;&amp; !prod.pNode)?'none':'block';
            		edit.style.display=(on &amp;&amp; prod.pNode)?'block':'none';
            		add.style.display=(on &amp;&amp; !prod.pNode)?'block':'none';
            	}
         	 }"
         >
            <div id="slidebox_toolbar" style="background:url(/xlive/images/rst/headerBg_520.png) no-repeat left top; height:48px; line-height:30px; padding:6px;">
                <div id="xlvid_name" style="color:#FFF;margin-left:10px; float:left;"></div>
                <div id="xlvid_edit" style="float:right; margin-right:5px;">
                	<div style="background:url(/xlive/images/rst/btnb_left.png) no-repeat left top; color:#FFF; text-decoration:none; padding:0px 6px 10px 2px; float:left;">
                		<span id="xlvid_edit_title" style="cursor:pointer;background:url(/xlive/images/rst/btnb_right.png) no-repeat right top; padding:0px 6px 10px 6px; margin-right:-10px; float:left;  line-height:24px; line-height:30px\9; font-size:13px;"">編輯</span>
               		</div>
                </div>
                <div style="float:right; width:170px; margin-right:0px;">
                   <div style="float:left; margin-top:1px;">
                	<div id="btn_showList"></div> 
                	<div id="btn_showBlock" class="btn_active"></div>
                   </div>
                   <div style="float:right;">
                        <div id="cart" style="background:url(/xlive/images/rst/btnd_left.png) no-repeat left top; color:#FFF; text-decoration:none; padding:0px 6px 10px 2px; display:inline-block;float:left">
                            <span id="cart" style="cursor:pointer;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top; padding:0px 6px 10px 6px; margin-right:-10px; display:inline-block; float:left; line-height:24px; line-height:30px\9; font-size:13px;">購物車
                            </span>
                        </div>
                        
                        <div id="cartpin" style="background:url(/xlive/images/rst/pin_left.png) no-repeat left top; padding:0px 4px 3px 6px; display:inline-block; line-height:16px; position:relative; top:-5px; right:10px; font-size:11px; float:left;">
                        	<span id="cartpin_value" style="background:url(/xlive/images/rst/pin_right.png) no-repeat right top; margin-right:-14px; padding:0px 8px 4px 3px; color:#FFF; display:inline-block; text-align:left; font-family:Verdana;">
                        	</span>
                        </div>
                       
                   </div>
                </div>
            </div> 
         
         	<div id="product">
         		<div id="data_pane">
         			<div id="icon_frame">
         				<div id="icon" xlvobject="xlv.obj.ximg"></div>
         			</div>
         			<div id="desc_frame">
         				<span id="desc"></span>
         				<div style="text-align:left; width:100%;clear:both">
               	    		<div id="name"></div>
                       		<div style="margin-left:2px;float:left;width:100%;line-height:24px">
                           		<div id="sale" style="float:left;">售價&nbsp;<span id="list_price"></span><img id="sale_sign" src="/xlive/images/rst/icon_m.png" align="bottom"></img><span id="price"></span>
                           		</div>
                           		<img id="add_prod" src="/xlive/images/rst/btn_add.png" border="0"></img>
                       		</div>
                    	</div>
                    </div>
         		</div>
         		<div id="edit_pane">
         			<img id="remove" src="/xlive/images/rst/btn_tool_del.png" title="移除商品"/>
         			<img id="update" src="/xlive/images/rst/btn_tool_reload.png" title="編輯商品"/> 
         			<img id="copy" src="/xlive/images/rst/btn_tool_copy.png" title="複製商品"/> 
         		</div>
         		<div id="add_pane">新增商品
         			<img id="paste" src="/xlive/images/rst/btn_tool_paste.png" title="貼上商品"/> 
         		</div>
         	</div>
         </div>
         
     	 	<div id="cart_pane" style="position:relative;float:left;width:520px;overflow:hidden"
     	 		xlvobject="xlv.obj.generic"
     	 		xlvmethod="{
     	 			initial:function(){
     	 				this.getParentById('menu_main').$V.cart_pane=this;
     	 	 			this.$V.viewport=xlv.util.findChild(this,{id:'viewport'},false,false);
     	 	 			this.$V.prod_list=xlv.util.findChild(this,{id:'prod_list'},false,false);
     	 	 			this.$V.order_pxml=xlv.util.findChild(this,{id:'order_pxml'},false,false);
     	 	 			this.$V.order_response=xlv.util.findChild(this,{id:'order_response'},false,false);
     	 	 			this.$V.cart_left=xlv.util.findChild(this,{id:'cart_left'},false,false);
     	 	 			this.$V.cart_left_span=xlv.util.findChild(this,{id:'cart_left',tag:'span'},false,false);
     	 	 			this.$V.cart_title=xlv.util.findChild(this,{id:'cart_title'},false,false);
     	 	 			this.$V.cart_right=xlv.util.findChild(this,{id:'cart_right'},false,false);
     	 	 			this.$V.cart_right_span=xlv.util.findChild(this,{id:'cart_right',tag:'span'},false,false);
     	 	 			this.$V.dot_1=xlv.util.findChild(this,{id:'dot_1'},false,false);
     	 	 			this.$V.dot_2=xlv.util.findChild(this,{id:'dot_2'},false,false);
     	 	 			this.$V.dot_3=xlv.util.findChild(this,{id:'dot_3'},false,false);
     	 				this.addEventHandler('click','_click');
     	 				this.$V.cart_index=0;
     	 			},
     	 			rebuild:function(){
     	 				this.slideToPane(0,true);
     	 				this.$V.order_pxml.build();
     	 				this.$V.prod_list.build();
     	 			},
     	 			orderResponse:function(){
     	 				var id=xlv.util.findChild(this.$V.order_response,{id:'id'},false,false);
     	 				var bonus=xlv.util.findChild(this.$V.order_response,{id:'bonus'},false,false);
     	 				var dm=this.getDataModel('menu_order');
     	 				xlv.util.setElementValue(id,dm.getValue('set-order/return/order/id'));
    	 				xlv.util.setElementValue(bonus,dm.getValue('set-order/return/order/bonus'));
    	 				xlv.util.setElementValue(bonus,dm.getValue('set-order/return/order/note'));
     	 	 			this.slideToResponse();
     	 			},
     	 			slideToResponse:function(){
     	 				this.slideToPane(2);
     	 			},
     	 			customerBeenReset:function(){
     	 				if(this.$V.cart_index==1)this.$V.order_pxml.build();
     	 			},
     	 			removeAllProd:function(){
   	 	 				var dm=this.getDataModel('menu_order');
   	 	 				dm.removeAllProd();
						var list=xlv.util.findChild(this,{id:'prod_list'},false,false); 
						var prods=xlv.util.children(list,{id:'prod_pattern'});
						for(var i=0;i &lt; prods.length;++i) prods[i].parentNode.removeChild(prods[i]); 				
   	 	 				return this.getParentById('menu_main').$V.bom_product.cartCountProducts();
     	 			},
     	 			slideToPane:function(index,noeffect){
     	 				this.$V.cart_left.style.display=((index==2)?'none':'');
     	 				this.$V.cart_right.style.display=((index==2)?'none':'');
     	 				var texts=['繼續購物','購物清單','訂單資訊','傳送訂單',''];
     	 				xlv.util.setElementValue(this.$V.cart_left_span,texts[index]);
     	 				xlv.util.setElementValue(this.$V.cart_title,(index==2)?'訂單回應':texts[index+1]);
     	 				xlv.util.setElementValue(this.$V.cart_right_span,texts[index+2]);
						this.$V.dot_1.style.color=(index==0)?'white':'darkblue';
						this.$V.dot_2.style.color=(index==1)?'white':'darkblue';
						this.$V.dot_3.style.color=(index==2)?'white':'darkblue';
     	 				this.$V.cart_index=index;
     	 				if(noeffect===true) return this.$V.viewport.scrollLeft=520*index;
     	 	 			var option={element:this.$V.viewport,properties:{},duration:300};
						option.properties.scrollLeft=520*index;
						xlv.util.styleEffect(option);
     	 			},
     	 			_click:function(event){
     	 				var tid=event.target.id;
     	 				if(tid=='back_to_menu'){
      	 	 				event.stop();
     	 	 				return this.getParentById('menu_main').showCart(false);
     	 				}
     	 				if(tid=='cart_left'){
     	 					event.stop();
     	 					if(this.$V.cart_index==0)return this.getParentById('menu_main').showCart(false);
     	 					return this.slideToPane(this.$V.cart_index-1);
     	 				}
     	 				if(tid=='cart_right'){
     	 					event.stop();
     	 					if(this.$V.cart_index==0){
     	 						var dm=this.getDataModel('menu_order');
     	 	 					if(dm.countProducts()==0)return alert('請選購商品!');
     	 	 					this.$V.order_pxml.build();
     	 					}
     	 					if(this.$V.cart_index==1){
     	 						if(!this.$V.order_pxml.complete())return;
     	 						var dm=this.getDataModel('menu_order');
     	 	 					if(dm.countProducts()==0)return alert('請選購商品!');
     	 	 					var ckey=this.getDataModel('customer').getValue('get-customer.return.customer.key');
     	 	 					dm.setValue(ckey,'set-order.customer-key');
     	 	 					return dm.webMethod('set-order');
     	 					}
     	 					if(this.$V.cart_index==2)return this.getParentById('menu_main').showCart(false);
     	 					return this.slideToPane(this.$V.cart_index+1);
     	 				}
     	 	 			if(tid=='remove'){
     	 	 				event.stop();
     	 	 				var prod=this.targetElement(event.target,{id:'prod_pattern'});
     	 	 				var dm=this.getDataModel('menu_order');
     	 	 				dm.removeProd(prod.pNode);
     	 	 				this.getParentById('menu_main').$V.prod_list.build();
     	 	 				return this.getParentById('menu_main').$V.bom_product.cartCountProducts();
     	 	 			}
     	 			}
     	 		}"
     	 	>
     	 	    <div id="cart_toolbar" style="position:relative;text-align:center;background:url(/xlive/images/rst/headerBg_520.png) no-repeat left top; height:48px; line-height:30px; padding:6px;">
     	 		    <div id="cart_left" style="float:left;background:url(/xlive/images/rst/btnd_left_arrow.png) no-repeat left top;color:#FFF;padding:0px 6px 0px 6px;margin:2px 4px 0px 6px;display:inline-block;">
     	 				<span id="cart_left" style="float:left;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top;padding:0px 6px 10px 6px;margin-right:-10px;display:inline-block;cursor:pointer;line-height:24px; line-height:30px\9; font-size:13px;"></span>
     	 			</div>
     	 			<span id="cart_title" style="line-height:30px;text-align:center;color:white;"></span>
     	 		    <div id="cart_right" style="float:right;background:url(/xlive/images/rst/btnd_left.png) no-repeat left top;color:#FFF;padding:0px 6px 0px 6px;margin:2px 4px 0px 6px;display:inline-block;">
     	 				<span id="cart_right" style="float:left;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top;padding:0px 6px 10px 6px;margin-right:-10px;display:inline-block;cursor:pointer;line-height:24px; line-height:30px\9; font-size:13px;"></span>
     	 			</div>
     	 			<div id="cart_dot" style="text-align:center;line-height:6px;margin-top:-8px;color:white;font-weight:bold;font-size:24px;top:30px;">
     	 				<span id="dot_1">.&nbsp;</span><span id="dot_2" style="color:darkblue">&nbsp;.&nbsp;</span><span id="dot_3" style="color:darkblue">&nbsp;.</span>
     	 			</div>
     	 		</div>
     	 		
            	<div id="viewport" style="clear:both;overflow:hidden;position:relative;width:520px;">
            	  <div id="canvas" style="position:relative;width:3000px">
     	 			<div id="prod_list" xlvobject="xlv.obj.generic" style="position:relative;float:left;width:520px;min-Height:1px"
     	 				xlvmethod="{
     	 					construct:function(){
     	 						this._pattern=xlv.util.findChild(this,{id:'prod_pattern'},false,false);
								if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
								this.$self('construct');
								this.getParentById('menu_main').$V.prod_list=this;
     	 					},
     	 					initial:function(){
     	 						this.$self('initial');
     	 						this.$V.prod_area=xlv.util.findChild(this,{id:'prod_area'},false,false);
     	 						this.$V.prod_count=xlv.util.findChild(this,{id:'prod_count'},false,false);
     	 						this.$V.prod_total=xlv.util.findChild(this,{id:'prod_total'},false,false);
     	 						this.addEventHandler('click','_click');
     		 				},
   		  	 				_click:function(event){
     	 						if(event.target.id=='update'){
									event.stop();
									var prod=this.targetElement(event.target,{id:'prod_pattern'});
									this.getParentById('menu_main').$V.cart_update.open(prod, prod.pNode);
     	 						}
     	 					},
     	 					build:function(){
     	 						while(this.$V.prod_area.firstChild) xlv.sys.dispose(this.$V.prod_area.firstChild,true);
     	 						var dm=this.getDataModel('menu_order');
     	 						var ps=dm.xml_selectNodes('properties/set-order/products/bom');
     	 						for(var i=0;i &lt; ps.length;++i){
	     	 						var prod=xlv.sys.clonePatternNode(this._pattern);
									this.$V.prod_area.appendChild(prod);
									prod.pNode=ps[i];
									xlv.sys.initialize(prod);
									this.refresh(prod);
								}
								if(!ps || ps.length==0)this.refreshCount(dm);
     	 					},
     	 					refresh:function(prod){
     	 						var node=prod.pNode;
     	 						var src=xlv.util.getXmlNodeValue('icon',node);
     	 						if(src) xlv.util.findChild(prod,{id:'icon'},false,false).imgSrc(src);
     	 						xlv.util.setElementValue(xlv.util.findChild(prod,{id:'name'},false,false),(xlv.util.getXmlNodeValue('name',node)||'&nbsp;'));
 								var optval=xlv.util.getXmlNodeValue('optval',node);
								var price=xlv.util.getXmlNodeValue('price',node);
								xlv.util.setElementValue(xlv.util.findChild(prod,{id:'price'},false,false),(parseInt(price)+parseInt(optval)));
								var options=xlv.util.getXmlNodeValue('ostr',node);
								xlv.util.findChild(prod,{id:'options'},false,false).innerHTML=this.addColor(options);
								var addons=xlv.util.getXmlNodeValue('astr',node);
								xlv.util.findChild(prod,{id:'addons'},false,false).innerHTML=this.addColor(addons);
								var qty=xlv.util.getXmlNodeValue('qty',node);
								xlv.util.setElementValue(xlv.util.findChild(prod,{id:'qty'},false,false),qty);
								xlv.util.setElementValue(xlv.util.findChild(prod,{id:'subtotal'},false,false),(parseInt(price)+parseInt(optval))*parseInt(qty));
     	 						this.refreshCount();
     	 					},
     	 					refreshCount:function(dm){
     	 						dm=(dm||this.getDataModel('menu_order'))
     	 						var total=dm.getValue('set-order.total');
     	 						xlv.util.setElementValue(this.$V.prod_total, (total||'0'));
     	 						var count=dm.countProducts();
     	 						var qty=dm.countQty();
     	 						if(!count||count==0)xlv.util.setElementValue(this.$V.prod_count,'請選取商品');
     	 						else xlv.util.setElementValue(this.$V.prod_count,'&nbsp;'+count+'&nbsp;款&nbsp;'+qty+'&nbsp;項&nbsp;');
     	 					},
     	 					addColor:function(options){
     	 						var ops=options.split('&nbsp;');
     	 						var ret='';
     	 						for(var i=0;i &lt; ops.length;++i){
     	 							if(ops[i].strip().length &lt; 1)continue;
     	 							ret+= ops[i].replace(':',':&nbsp;&lt;span style=\'color:blue\'&gt;');
     	 							ret+='&lt;/span&gt; &nbsp;';
     	 						}
     	 						return ret;
     	 					}
     	 				}"
     		 		>
     		 			<div style="float:left;margin-left:32px"><span id="prod_count" style="color:white;font-size:16px;"></span></div>
     		 			<div style="float:right;margin-right:32px"><span style="font-size:11px;color:white">$</span><span id="prod_total" style="color:white;font-size:16px;font-weight:bold">0</span></div>
     		 			<div id="prod_area" style="clear:both"></div>
     	 				<div id="prod_pattern" style="position:relative;float:left;width:500px;padding:10px;">
     		 					<div style="padding:5px;position:relative;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat;">
     		 						<div style="position:relative;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:white">
     		 						    <img id="remove" src="/xlive/images/rst/btn_tool_del.png" style="float:left;padding:22px 4px;"></img>
         								<div id="icon" xlvobject="xlv.obj.ximg" style="float:left;width:50px;height:50px;padding:7px 10px 7px 7px;"></div>
         								<div style="line-height:20px;padding-top:6px;font-weight:bold;font-size:15px;">
               	    						<span id="name"></span>
                  		  				</div>
         								<div style="line-height:20px;font-size:12px;">
               	    						<span id="options"></span>
                    					</div>
                    					<div style="line-height:20px;padding-bottom:4px;font-size:12px;">
                    						<span id="addons"></span>
                    					</div>
                    					<div style="position:absolute;line-height:30px;top:15px;right:4px;">
                    						<span id="qty" style="font-size:16px;font-weight:bold"></span><span style="font-size:12px;padding:4px 0px 4px 4px;margin:0px;">x</span>
                    						<img src="/xlive/images/rst/icon_m.png" style="margin-top:2px 0 0 0;"></img>
                    						<span id="price" style="font-size:14px;"></span>
                    						<span style="font:12px;padding:4px 4px 4px 0px">=</span><span id="subtotal" style="font-size:16px;font-weight:bold;margin-right:8px"></span>
                    						<img id="update" src="/xlive/images/rst/btn_tool_reload.png" style="top:0px;right:20px"/>
                    					</div>
                    					<div style="clear:both"></div>
                	    			</div>
                	    		</div>
  		   	 			</div>
     		 		</div>
     	 		  
 					<div id="order_detail" style="position:relative;float:left;width:520px;padding:8px 0 8px 0;">
 						 <div id="order_pxml" xlvprop="{showCancel:false,showComplete:false}" style="width:460px;margin-left:20px" class="pxml_border_radius"
 						 	xlvobject="xlv.obj.pxml" 
 						 	xlvmethod="{
 						 		build:function(){
 						 			if(this.$V.currentBox) this._commitBox(this.$V.currentBox);
 						 			var dm=this.getDataModel('menu_order');
 						 			dm.resetNameDate();
 						 			var node=dm.getNode('set-order');
 						 			this.$self('build',node);
 						 		},
 						 		complete:function(){
 						 			if(!this._commitBox(this.$V.currentBox))return false;
 						 			return true;
 						 		}
 						 	}"
 						 >
 						 </div>
 					</div>    
 					<div id="order_response" style="position:relative;float:left;width:520px">
 						<div id="prolog" style="float:left;line-height:30px;clear:both;margin:0 0 20px 36px;color:white;font-size:15px">感謝您的消費. 您本次的訂單號碼及紅利點數.
 						</div>
     	 				<div style="float:left;width:450px;margin-left:30px;padding:5px;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat">
     	 					<div style="font-size:13px;padding:0px;background:white;border:1px solid gray;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;">
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">訂單編號</span>
     	 							<span id="id" style="float:right;line-height:20px;padding:8px;width:320px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>	
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">紅利點數</span>
     	 							<span id="bonus" style="float:right;line-height:20px;padding:8px;width:340px;margin-right:4px;text-align:right;color:blue"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">備註</span>
     	 							<span id="note" style="float:right;line-height:20px;padding:8px;width:340px;margin-right:4px;text-align:right;color:blue"></span>
     	 						</div>
     	 						<div style="clear:both;"></div>
     	 					</div>
     	 				</div>
     	 				<div style="clear:both;"></div>
 						<div id="epilog" style="margin-top:20px;color:white;font-size:15px;line-height:30px;text-align:center">謝謝惠顧.
 						</div>
      	 				<div style="width:436px;margin:20px 0 0 36px;padding:5px;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat;cursor:pointer">
 			 				<div id="back_to_menu" style="color:blue;font-size:13px;line-height:30px;text-align:center;;border:1px solid white;background:url(/xlive/images/pxml/btnb_bg.gif) top left repeat">返回購物主頁
 							</div>
 						</div>
 					</div>    
     	 		  </div>
     	 		</div>
     	 	</div>
     	  
 
     </div>         
	</div>
         
	<div style="clear:both;margin-bottom:32px"></div>    
  
    <div id="add_to_cart" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    	xlvobject="xlv.obj.generic"
    	xlvmethod="{
    		construct:function(){
    			this.getParentById('menu_main').$V.add_to_cart=this;
    			this.$V.pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
    		},
    		open:function(node){
    			this.style.display='block';
    			this.$V.pxml.style.top=this.offsetHeight+'px';
    			this.$V.pxml.style.display='block';
    			this.$V.pxml.setNode(node);
    			this.$V.pxml.style.left=(this.offsetWidth-this.$V.pxml.offsetWidth)/2+'px';
    			var options={element:this.$V.pxml,style:{top:120}};
    			xlv.util.styleEffect(options);
    		},
    		close:function(){
    		   	var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   	options.finished=function(){
    				this.style.display='none';
    				this.$V.pxml.style.display='none';
    		   	}.bind(this);
    			xlv.util.styleEffect(options);
    		}
    	}"
    >
	  <div id="pxml" xlvobject="xlv.obj.pxml" style="position:relative;width:300px" class="pxml_border_radius pxml_shadow"
	    xlvprop="{completeString:'加入購物車'}"
	  	xlvmethod="{
	  		setNode:function(node){
	  			node=node.cloneNode(true);
	  			var cs = xlv.util.selectXmlNodes('*[@pxml]',node);
	  			for(var i=0;i &lt; cs.length;++i)cs[i].removeAttribute('pxml');
	  			node.setAttribute('pxml','pxml');
	  			node.setAttribute('name','商品');
	  			var name=xlv.util.selectXmlSingleNode('name',node);
	  			name.setAttribute('pxml','text');
	  			name.setAttribute('name','名稱');
	  			var price=xlv.util.selectXmlSingleNode('price',node);
	  			price.setAttribute('pxml','text');
	  			price.setAttribute('name','單價');
	  			var qty=xlv.util.selectXmlSingleNode('qty',node);
	  			qty.setAttribute('pxml','int');
	  			qty.setAttribute('name','數量');
	  			qty.setAttribute('min','1');
	  			xlv.util.setXmlText(qty,'1');
	  			var options=xlv.util.getXmlNodeValue('options',node);
	  			var opts=options.split(',');
	  			var dmo=this.getDataModel('options');
	  			for(var i=0;i &lt; opts.length;++i){
	  				var n = dmo.getOption(opts[i]);
	  				if(n){
	  					n.setAttribute('pxml','select');
	  					n.setAttribute('prolog','');
	  					n.setAttribute('epilog','');
	  					node.appendChild(n);
	  				}
	  			}
	  			var addons=xlv.util.getXmlNodeValue('addons',node);
	  			var adds=addons.split(',');
	  			var dma=this.getDataModel('addons');
	  			for(var i=0;i &lt; adds.length;++i){
	  				var n = dma.getAddon(adds[i]);
	  				if(n){
	  					n.setAttribute('pxml','select');
	  					n.setAttribute('prolog','');
	  					n.setAttribute('epilog','');
	  					node.appendChild(n);
	  				}
	  			}
	  			this.build(node);
	  		},
	  		complete:function(){
	  			var dm=this.getDataModel('menu_order');
	  			dm.addProd(this.$P.pNode);
	  			this.getParentById('add_to_cart').close();
	  			this.getParentById('menu_main').$V.bom_product.cartCountProducts();
	  		},
	  		cancel:function(){
	  			this.getParentById('add_to_cart').close();
	  		}
	  	}"
	  >
	  </div>
    </div>
    
    
    <div id="cart_update" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    	xlvobject="xlv.obj.generic"
    	xlvmethod="{
    		construct:function(){
    			this.getParentById('menu_main').$V.cart_update=this;
    			this.$V.pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
    		},
    		open:function(prod, node){
    			this.$V.prod=prod;
    			this.$V.node=node;
    			this.style.display='block';
    			this.$V.pxml.style.top=this.offsetHeight+'px';
    			this.$V.pxml.style.display='block';
    			this.$V.pxml.build(node);
    			this.$V.pxml.style.left=(this.offsetWidth-this.$V.pxml.offsetWidth)/2+'px';
    			var options={element:this.$V.pxml,style:{top:120}};
    			xlv.util.styleEffect(options);
    		},
    		close:function(commit){
    		   	var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   	options.finished=function(){
    				this.style.display='none';
    				this.$V.pxml.style.display='none';
    		   	}.bind(this);
    			xlv.util.styleEffect(options);
    			if(commit)this.getParentById('menu_main').$V.prod_list.refresh(this.$V.prod);
    		}
    	}"
    >
	  <div id="pxml" xlvobject="xlv.obj.pxml"  style="width:300px" class="pxml_border_radius pxml_shadow"
	    xlvprop="{completeString:'完成'}"
	  	xlvmethod="{
	  		build:function(node){
	  			this.$P.pNode=node;
	  			this.$self('build',node);
	  		},
	  		complete:function(){
	  			var dm=this.getDataModel('menu_order');
	  			dm.calcProd(this.$P.pNode);
	  			dm.countTotal();
	  			this.getParentById('cart_update').close(true);
	  		},
	  		cancel:function(){
	  			this.getParentById('cart_update').close(false);
	  		}
	  	}"
	  >
	  </div>
    </div>
    
    
    <div id="set_product" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    	xlvobject="xlv.obj.generic"
    	xlvmethod="{
    		construct:function(){
    			this.getParentById('menu_main').$V.set_product=this;
    			this.$V.pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
    		},
    		open:function(prod,node){
    			this.$V.prod=prod;
    			this.$V.node=node;
    			this.style.display='block';
    			this.$V.pxml.style.top=this.offsetHeight+'px';
    			this.$V.pxml.style.display='block';
    			this.$V.pxml.build(node);
    			this.$V.pxml.style.left=(this.offsetWidth-this.$V.pxml.offsetWidth)/2+'px';
    			var options={element:this.$V.pxml,style:{top:120}};
    			xlv.util.styleEffect(options);
    		},
    		close:function(commit){
    		   	var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   	options.finished=function(){
    				this.style.display='none';
    				this.$V.pxml.style.display='none';
    		   	}.bind(this);
    			xlv.util.styleEffect(options);
    			if(commit)this.getDataModel('menu').webMethod('set-product');
    		}
    	}"
    >
	  <div id="pxml" xlvobject="xlv.obj.pxml"  style="width:320px" class="pxml_border_radius pxml_shadow"
	    xlvprop="{completeString:'完成'}"
	  	xlvmethod="{
	  		build:function(node){
	  			var addons =this.getDataModel('addons').getAddons();
	  			var options =this.getDataModel('options').getOptions();
	  			var node=this.getDataModel('menu').getNode('set-product');
	  			xlv.util.selectXmlSingleNode('options',node).setAttribute('options',options);
	  			xlv.util.selectXmlSingleNode('addons',node).setAttribute('options',addons);
	  			this.$self('build',node);
	  		},
	  		complete:function(){
	  			this.getParentById('set_product').close(true);
	  		},
	  		cancel:function(){
	  			this.getParentById('set_product').close(false);
	  		},
	  		nodeForBox:function(node,box){
	  			this.$self('nodeForBox',node,box);
	  			var ul=xlv.util.findChild(box,{tag:'ul',id:'pxml_extended'});
	  			if(ul)return;
	  			var pxml=node.getAttribute('pxml');
	  			if(pxml=='select') {
	  				box.addExtend=true;
	  				var ul=document.createElement('ul');
	  				ul.setAttribute('id', 'pxml_extended');
	  				ul.pNode=node;
	  				var li=document.createElement('li');
	  				li.pNode=node;
	  				ul.appendChild(li);
	  				ul.style.marginTop='40px';
	  				li.style.width='100%';
	  				li.style.height='32px';
	  				li.style.textAlign='center';
	  				li.style.background='url(/xlive/images/pxml/btnb_bg.gif) left bottom';
	  				box.appendChild(ul);
	  				if('options'==node.tagName){
	  					xlv.util.setElementValue(li, 'options management');
	  					li.onclick=function(){
	  						//this.getPaneById('setProduct_main').dispose();
	  						//var prop={callback:'setProduct'};
	  						//return this.getDesktop().showPane('/xlive/rst/setOptions.html',prop,null,{paneIn:'center',opacity:0.2,color:'gray'});
	  					}.bind(this);
	  					return;
	  				}
	  				if('addons'==node.tagName){
	  					xlv.util.setElementValue(li, 'addons management');
	  					li.onclick=function(){
	  						//this.getPaneById('setProduct_main').dispose();
	  						//var prop={callback:'setProduct'};
	  						//return this.getDesktop().showPane('/xlive/rst/setAddons.html',prop,null,{paneIn:'center',opacity:0.2,color:'gray'});
	  					}.bind(this);
	  					return;
	  				}
	  			}
	  		}
	  	}"
	  >
	  </div>
	  
    </div>
    
    
    
    <div id="set_directory" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    	xlvobject="xlv.obj.generic"
    	xlvmethod="{
    		construct:function(){
    			this.getParentById('menu_main').$V.set_directory=this;
    			this.$V.pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
    		},
    		open:function(prod,node){
    			this.$V.prod=prod;
    			this.$V.node=node;
    			this.style.display='block';
    			this.$V.pxml.style.top=this.offsetHeight+'px';
    			this.$V.pxml.style.display='block';
    			this.$V.pxml.build(node);
    			this.$V.pxml.style.left=(this.offsetWidth-this.$V.pxml.offsetWidth)/2+'px';
    			var options={element:this.$V.pxml,style:{top:120}};
    			xlv.util.styleEffect(options);
    		},
    		close:function(commit){
    		   	var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   	options.finished=function(){
    				this.style.display='none';
    				this.$V.pxml.style.display='none';
    		   	}.bind(this);
    			xlv.util.styleEffect(options);
    			if(commit)this.getDataModel('menu').webMethod('set-directory');
    		}
    	}"
    >
	  <div id="pxml" xlvobject="xlv.obj.pxml"  xlvprop="{completeString:'完成'}" style="width:320px" class="pxml_border_radius pxml_shadow"
	  	xlvmethod="{
	  		build:function(node){
	  			var node=this.getDataModel('menu').getNode('set-directory');
	  			this.$self('build',node);
	  		},
	  		complete:function(){
	  			this.getParentById('set_directory').close(true);
	  		},
	  		cancel:function(){
	  			this.getParentById('set_directory').close(false);
	  		}
	  		
	  	}"
	  >
	  </div>
	  
	  
    </div>
    



  </div>
</body>
</html>
